Installing Node.js and npm for React Native Development

Course: React Native Training

Topic: Installing Node.js and npm

Course Link: React Native Training – JustAcademy

Demo Link: Register for a Course Demo

Official Node.js Website: Download Node.js

Official npm Documentation: Installing Node.js and npm

React Native Documentation: Getting Started with React Native

1. Introduction to Node.js and npm

Node.js and npm are essential tools in many JavaScript development workflows. When developing React Native applications, Node.js provides the JavaScript runtime used by development tools, while npm helps install and manage the packages required by the project.

Before creating a React Native application, developers should ensure that Node.js and npm are installed correctly and that their versions are compatible with the React Native project or framework they plan to use.

Installing these tools is one of the first steps in setting up a mobile development environment. After installation, developers can use terminal commands to create projects, install dependencies, start development servers, and execute project scripts.

1.1 Learning Objectives

• Understand what Node.js is and why React Native developers use it.
• Understand npm and its role in JavaScript package management.
• Learn how to download and install Node.js on Windows, macOS, and Linux.
• Verify Node.js and npm installations using terminal commands.
• Understand package.json and package-lock.json.
• Learn how to install, update, and remove project dependencies.
• Understand common installation errors and their solutions.
• Prepare the environment for creating a React Native application.

2. What Is Node.js?

Node.js is an open-source JavaScript runtime that allows JavaScript code to run outside a web browser. It uses the V8 JavaScript engine and provides APIs for tasks such as file operations, networking, and process management.

JavaScript was originally associated primarily with web browsers. Node.js made it possible to execute JavaScript programs directly on computers and servers without requiring a browser environment.

2.1 Why Is Node.js Used in React Native?

React Native development relies on tools that run through Node.js. Depending on the project setup, these tools may include Metro, project initialization utilities, command-line tools, and package management workflows.

• Metro: Bundles JavaScript and related assets for React Native applications.
• Project tooling: Runs commands used to create and manage development projects.
• Package management: Supports installing dependencies required by an application.
• Development server: Supports the JavaScript development workflow and communication with the application during development.
• Build scripts: Executes project-specific commands defined in package.json.

2.2 Example of Running JavaScript with Node.js

After installing Node.js, you can execute JavaScript files directly from the terminal.

Create a file named hello.js and add the following code:

console.log("Hello, Node.js!");
console.log("Preparing for React Native development.");

Open a terminal in the directory containing the file and run:

node hello.js

Expected output:

Hello, Node.js!
Preparing for React Native development.

This example confirms that Node.js can execute a basic JavaScript file from the command line.

3. What Is npm?

npm stands for Node Package Manager. It is the standard package manager distributed with Node.js installations obtained through the official Node.js installer. npm includes a command-line interface that helps developers install and manage JavaScript packages.

A package is reusable code that can provide functionality such as navigation, form validation, networking, testing, or user interface components.

3.1 Main Functions of npm

• Install project dependencies.
• Remove packages that are no longer needed.
• Update dependencies according to version requirements.
• Manage project scripts.
• Track package versions in package.json and package-lock.json.
• Download packages from the npm registry.
• Install development tools used for testing, linting, and building projects.

3.2 Common npm Commands

4. Difference Between Node.js and npm

Node.js and npm are related but perform different tasks. Installing Node.js through the official installer normally installs npm as well. You should verify both commands after installation.

5. System Requirements Before Installation

Before installing Node.js, check your operating system, processor architecture, available disk space, and project requirements.

5.1 Basic Requirements

• A supported version of Windows, macOS, or Linux.
• Internet access to download the installer and project packages.
• Permission to install software or configure a version manager.
• A terminal application such as Command Prompt, PowerShell, Terminal, or a Linux shell.
• A code editor such as Visual Studio Code, if desired.
• Sufficient disk space for Node.js, npm packages, and React Native development tools.

5.2 Check Your Operating System

Windows: Open Command Prompt or PowerShell.

winver

macOS: Open Terminal.

sw_vers

Linux: Open a terminal.

cat /etc/os-release

These commands help identify your operating system and its version. Installation steps can vary depending on the operating system and distribution.

6. Choosing the Correct Node.js Version

Node.js releases include Long-Term Support (LTS) versions and Current releases. LTS versions are generally recommended for stable development environments because they receive maintenance and security updates over a defined support period.

6.1 LTS Version

LTS stands for Long-Term Support. An LTS release is generally a good starting point for students, development teams, and production projects that prioritize stability.

6.2 Current Version

The Current release provides newer features sooner, but it may not be the best choice for every project. Some dependencies and development tools may require particular Node.js versions.

6.3 Which Version Should React Native Developers Install?

Choose a supported LTS release that satisfies the requirements of your React Native version, Expo SDK, and project dependencies. Do not assume that the newest available Node.js release will automatically be compatible with every existing project.

For current version information, refer to the official Node.js download page and the React Native environment setup guide.

7. Installing Node.js and npm on Windows

Windows users can install Node.js using the official installer or a supported Node.js version manager. The official installer is a straightforward option for beginners.

7.1 Step 1: Open the Official Node.js Website

1. Open a web browser.
2. Visit https://nodejs.org/en/download.
3. Choose the appropriate Windows installer for your system architecture.
4. Select an LTS release compatible with your React Native project.

7.2 Step 2: Download the Installer

Download the Windows installer, normally provided as an .msi file. Make sure that the downloaded file is intended for Windows and matches the architecture of your computer.

7.3 Step 3: Run the Installer

1. Open the downloaded installer.
2. Accept the license agreement after reviewing it.
3. Choose the installation directory or keep the default location.
4. Keep the standard Node.js runtime, npm package manager, and PATH options selected.
5. Complete the installation wizard.
6. Restart your terminal windows so they can detect the updated PATH.

7.4 Step 4: Verify the Installation

Open a new Command Prompt or PowerShell window and execute:

node -v
npm -v

The commands should display version numbers. For example, the output may look like this:

v24.x.x
11.x.x

The exact output depends on the version you installed. Your installed versions do not need to match this illustrative example exactly; they must meet your project's requirements.

7.5 Step 5: Check the Installation Paths

To find the executable paths on Windows, use:

where node
where npm

If the commands return file paths, Windows can locate the executables. If they are not recognized, check the installation and PATH configuration.

8. Installing Node.js and npm on macOS

macOS developers can use the official installer or a package manager such as Homebrew. A Node.js version manager is also useful when different projects require different versions.

8.1 Method A: Official Installer

1. Visit the official Node.js download page.
2. Choose the macOS installer compatible with your Mac.
3. Download and open the installer package.
4. Follow the installation instructions.
5. Open a new Terminal window.
6. Verify the installation using node -v and npm -v.

8.2 Method B: Homebrew

If Homebrew is already installed, you can install Node.js using:

brew install node

After the installation finishes, verify both tools:

node -v
npm -v

Homebrew installs packages in locations that depend on the Mac's architecture and Homebrew configuration. Avoid assuming a fixed installation path.

8.3 Method C: Node Version Manager

A Node.js version manager allows developers to install and switch between multiple Node.js versions. This is useful when maintaining several React Native projects with different requirements.

Choose a trusted version manager and follow its official installation instructions. After installing and configuring it, install a supported Node.js version and verify it:

node -v
npm -v

Do not combine multiple Node.js installation methods without understanding how their PATH entries interact, because the terminal may run a different Node.js version than expected.

9. Installing Node.js and npm on Linux

Linux installation steps depend on the distribution. Developers can use their distribution's package manager, the official Node.js distribution options, or a Node.js version manager.

9.1 Check Your Distribution

cat /etc/os-release

9.2 Install Using a Supported Method

Follow the installation instructions for your Linux distribution or use a suitable version manager. The official npm documentation provides guidance on Node.js and npm installation methods.

Official reference: Downloading and Installing Node.js and npm.

9.3 Verify the Installation

node -v
npm -v

If either command is unavailable, review the installation output, terminal PATH, and shell configuration.

10. Understanding the PATH Environment Variable

PATH is an environment variable that contains directories in which the operating system searches for executable programs. When you type node or npm in a terminal, the operating system uses PATH to locate the appropriate command.

10.1 Why PATH Matters

• It allows commands to run without entering the full executable path.
• It helps development tools locate Node.js.
• It can determine which version is executed when multiple installations exist.
• Incorrect PATH configuration may cause command-not-found errors.

10.2 Check PATH on Windows

echo %PATH%
where node
where npm

10.3 Check PATH on macOS or Linux

echo $PATH
which node
which npm

If multiple paths are returned or unexpected versions appear, inspect your version manager configuration and PATH order before reinstalling anything.

11. Verifying Node.js and npm Installation

After installation, perform several basic checks to ensure that Node.js and npm work correctly.

11.1 Check Node.js Version

node -v

This command displays the active Node.js version.

11.2 Check npm Version

npm -v

This command displays the active npm version.

11.3 Run a JavaScript Command

node -e "console.log('Node.js is working')"

If the message appears, Node.js can execute a simple JavaScript expression.

11.4 Inspect npm Configuration

npm config get registry
npm config get prefix

The first command displays the registry configured for npm. The second displays the configured global package prefix. These values can be useful when diagnosing package installation issues.

11.5 Verify the Basic Installation

• node -v returns a version number.
• npm -v returns a version number.
• A simple JavaScript command runs successfully.
• The commands are available in a newly opened terminal.
• The active Node.js version meets the requirements of your React Native project.

12. Understanding npm Packages and Dependencies

JavaScript projects commonly depend on packages created by other developers. A package may contain reusable code, configuration tools, testing utilities, or build tools.

For example, a React Native application may use packages for navigation, API communication, date formatting, state management, or form validation.

12.1 What Is a Dependency?

A dependency is a package that an application or tool requires to perform its work. Dependencies are recorded in package.json and installed into the project's dependency directory when the package manager runs.

12.2 What Is a Development Dependency?

A development dependency is a package used primarily during development, testing, linting, or building rather than directly as application functionality at runtime.

12.3 Installing a Package

Inside an existing Node.js project, run:

npm install package-name

Replace package-name with the name of the package you need. Review the package documentation and compatibility requirements before adding it to a React Native project.

12.4 Installing a Development Dependency

npm install --save-dev package-name

This adds the package to the project's development dependencies. The shorter -D option can also be used.

13. Understanding package.json

The package.json file describes a JavaScript project's metadata, scripts, and dependency requirements. npm uses this file to understand how packages and project commands are managed.

13.1 Example package.json

{
  "name": "node-npm-practice",
  "version": "1.0.0",
  "private": true,
  "description": "A practice project for learning Node.js and npm",
  "scripts": {
    "start": "node hello.js"
  }
}

This example defines a small Node.js project with a start script. It is not a complete React Native package configuration.

13.2 Important Fields

14. Understanding package-lock.json

The package-lock.json file records the resolved dependency tree and package versions used by npm. It helps teams install consistent dependency versions across development environments and automated build systems.

14.1 Why Is It Important?

• Records resolved package versions.
• Helps reproduce the project's dependency tree.
• Supports consistent installations across team members.
• Provides integrity information for package contents where applicable.
• Helps reduce unexpected differences between installations.

14.2 Installing from an Existing Lockfile

When a project already contains package.json and package-lock.json, use:

npm ci

This command is designed for clean, reproducible installations, especially in continuous integration environments. It removes the existing node_modules directory and installs the dependency tree from the lockfile. It may fail if the lockfile and package.json are inconsistent.

For ordinary development, npm install is also commonly used to install dependencies and update the lockfile when necessary.

15. Creating Your First npm Project

After installing Node.js and npm, create a small practice project to understand how npm initializes a package and executes scripts.

15.1 Step 1: Create a Project Folder

mkdir node-npm-practice
cd node-npm-practice

15.2 Step 2: Initialize npm

npm init -y

This command creates a package.json file with default values. You can edit the file later to add project metadata and scripts.

15.3 Step 3: Create a JavaScript File

Create a file named hello.js and add:

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("React Native Developer"));

15.4 Step 4: Add an npm Script

Open package.json and add a script inside the existing scripts object:

"scripts": {
  "start": "node hello.js"
}

Keep the JSON syntax valid and avoid creating duplicate scripts keys.

15.5 Step 5: Run the Project

npm run start

Expected output:

Hello, React Native Developer!

This exercise demonstrates how npm can run commands defined by a project.

16. Preparing Node.js and npm for React Native

After Node.js and npm are installed, the next step is to select a React Native development workflow. React Native projects can be created using a framework such as Expo or by setting up a native React Native project directly.

16.1 Expo Workflow

Expo provides tools and services that simplify many parts of React Native development. It is a popular starting point for learners and for applications whose requirements are supported by the Expo ecosystem.

Follow the current instructions in the official Expo documentation when creating a project. The recommended commands and requirements can change as the tooling evolves.

16.2 Example: Creating an Expo Project

After verifying Node.js and npm, use the current Expo project creation command from the official documentation. A common starting command is:

npx create-expo-app@latest MyFirstApp

Move into the new project directory:

cd MyFirstApp

Start the development workflow using the command specified by the generated project instructions. In many new Expo projects, this is:

npx expo start

Follow the terminal instructions to open the project in a supported development environment. Device and native build requirements depend on the chosen workflow.

16.3 React Native Without a Framework

Some developers choose to create a React Native project without using a framework. This approach generally requires additional native development tools.

Before proceeding, read the official React Native setup guide. The required Node.js version, Java Development Kit, Android Studio, Android SDK, Xcode, and other dependencies vary according to the operating system and target platform.

16.4 Important Note About iOS Development

A Mac is required to build React Native applications locally for iOS using Xcode. You can still learn React Native on other operating systems, and some workflows support testing through compatible devices or hosted build services, but local iOS native builds require macOS and Xcode.

17. Understanding npx

npx is a command-line tool distributed with npm that can execute package binaries. It is useful when running project generators and development commands without manually installing every command-line tool globally.

17.1 Example Commands

npx --version
npx create-expo-app@latest MyFirstApp

The first command displays the available npx version. The second invokes the specified project creation package according to npm's execution rules.

17.2 npm vs npx

Always verify the source and intended behavior of a package before executing it, especially when a command downloads and runs code.

18. Installing Packages for a React Native Project

Once you have a React Native project, you can install compatible packages to add features. React Native projects may require packages that include JavaScript code, native code, or both.

18.1 Navigate to the Project Directory

cd MyFirstApp

Run package commands from the correct project directory so that dependencies are added to the intended application.

18.2 Install a Package

npm install package-name

Replace the placeholder with the actual package name and use the package's official setup instructions.

18.3 Install Development Tools

npm install --save-dev package-name

This is useful for development-only tools. Confirm whether a tool belongs in dependencies or devDependencies by checking its documentation.

18.4 Native Package Requirements

Packages that include native code may require extra platform-specific steps. For example, an iOS project may need CocoaPods dependency installation, while an Android project may need native configuration. Follow the package's instructions and ensure that it supports your React Native version and project architecture.

19. Managing npm Versions and Node.js Versions

Different projects can require different Node.js versions. A version manager allows developers to install and switch versions without repeatedly uninstalling and reinstalling Node.js.

19.1 Why Use a Version Manager?

• Work on older and newer projects on the same computer.
• Match the Node.js version specified by a project.
• Test software against multiple Node.js versions.
• Reduce conflicts between global installations.
• Make it easier to update the development environment.

19.2 Version Compatibility

Before changing Node.js versions, check project documentation, the package.json engines field if present, and the official React Native or Expo requirements.

A Node.js version manager is especially useful for teams that maintain multiple projects. On Windows, use a Windows-compatible version manager; on macOS and Linux, choose a version manager supported by your shell and operating system.

20. Common Node.js and npm Installation Errors

21. Troubleshooting Node.js Not Recognized

This is a common problem for beginners after installing Node.js on Windows.

21.1 Check Whether Node.js Is Installed

Open a new Command Prompt and run:

node -v
npm -v

21.2 Check the Executable Path

where node
where npm

If no executable path is found, confirm that Node.js was installed successfully and that its installation directory is available through PATH.

21.3 Restart the Terminal

Terminals opened before installation may not receive the updated environment variables. Close the terminal and open a new one before testing again.

21.4 Avoid Unnecessary Reinstallation

If Node.js is already installed, first inspect the active version and executable paths. Multiple installations can cause conflicts, so reinstalling immediately may make the configuration harder to diagnose.

22. Troubleshooting npm Permission Errors

Permission errors can occur when npm attempts to write to a directory that the current user cannot modify.

22.1 Common Causes

• A global package directory has restricted permissions.
• Node.js was installed using a method that conflicts with the current user account.
• Multiple Node.js installations are configured.
• The project directory has incorrect ownership or access permissions.

22.2 Recommended Solutions

• Read the complete error message to identify the directory involved.
• Consider a Node.js version manager for user-managed installations.
• Check the permissions of the project folder.
• Use the installation method recommended for your operating system.
• Avoid running every npm command with administrator or root privileges.

Do not change permissions on broad system directories or run arbitrary commands with elevated privileges without understanding their effects.

23. Troubleshooting npm Dependency Conflicts

Dependency conflicts can occur when packages require incompatible versions of React Native, React, or other libraries.

23.1 Inspect the Error

Read the npm error output carefully. It often identifies the packages whose version requirements conflict.

23.2 Check Package Compatibility

• Review the package's official documentation.
• Check which React Native versions are supported.
• Confirm the required React version.
• Check whether the package supports your project's native architecture.

23.3 Reinstall Dependencies Carefully

If the dependency files are valid and the project uses a committed lockfile, a clean installation may help:

npm ci

This replaces the project's node_modules directory and installs from package-lock.json. Commit or back up important changes before cleaning a working project.

Avoid using --force or --legacy-peer-deps as a first response to dependency conflicts. These options may bypass compatibility checks without resolving the underlying issue.

24. Security Best Practices for Node.js and npm

Installing packages introduces code from external sources into your development environment. Developers should use trusted sources and review dependency risks.

• Download Node.js from the official website or use a trusted version manager.
• Use supported Node.js releases and apply security updates.
• Review package names before installing them to avoid typosquatting.
• Prefer maintained packages with clear documentation.
• Inspect dependency changes before accepting updates.
• Use npm audit to review known vulnerabilities reported for project dependencies.
• Investigate audit findings and apply compatible updates where appropriate.
• Avoid exposing authentication tokens, passwords, or private keys in source code.
• Do not run unknown installation scripts without checking their source.
• Use lockfiles to help maintain reproducible dependency installations.

24.1 Example: Audit Project Dependencies

npm audit

This command checks the dependency tree against npm's available vulnerability information. Findings should be reviewed in context; not every suggested update can be applied safely without testing.

25. Best Practices for React Native Developers

• Use a Node.js version supported by the selected React Native or Expo workflow.
• Verify Node.js and npm before creating a project.
• Use a version manager when several projects require different Node.js versions.
• Keep project dependencies and lockfiles under version control.
• Run package installation commands from the correct project directory.
• Read package documentation before installing native libraries.
• Use npm scripts for repeatable project commands.
• Avoid unnecessary global package installations.
• Review errors carefully instead of immediately deleting configuration files.
• Test the project after dependency updates.

26. Practical Exercise 1: Verify Your Installation

Objective: Confirm that Node.js and npm are installed and working correctly.

Tasks

1. Open your operating system's terminal.
2. Run node -v.
3. Run npm -v.
4. Run node -e "console.log('Installation successful')".
5. Check the executable paths using where node on Windows or which node on macOS and Linux.
6. Record the installed versions and verify that they satisfy your project requirements.

Expected Result

You should see the Node.js version, npm version, and the message Installation successful. You should also be able to locate the active Node.js executable.

27. Practical Exercise 2: Create an npm Project

Objective: Learn how to initialize a project and run JavaScript using npm.

Tasks

1. Create a directory named npm-practice.
2. Navigate into that directory.
3. Run npm init -y.
4. Create a file named app.js.
5. Write a JavaScript function that returns a greeting message.
6. Add a start script to package.json.
7. Run the project using npm run start.

Sample app.js

function welcome(name) {
  return `Welcome, ${name}!`;
}

console.log(welcome("React Native Student"));

Expected Result

Welcome, React Native Student!

28. Practical Exercise 3: Prepare a React Native Project

Objective: Use Node.js and npm as the foundation for a mobile development project.

Tasks

1. Verify Node.js and npm.
2. Read the current React Native environment setup documentation.
3. Choose either an Expo-based workflow or a React Native project without a framework.
4. Follow the official project creation instructions for the selected workflow.
5. Navigate to the generated project directory.
6. Install dependencies according to the project instructions.
7. Start the development server or build workflow.
8. Resolve any errors by checking the relevant setup requirements.

Expected Result: A React Native project should be created and its development tools should run successfully according to the selected workflow.

29. Frequently Asked Interview Questions and Answers

Q1. What is Node.js?

Answer: Node.js is an open-source JavaScript runtime that allows JavaScript to execute outside a web browser.

Q2. What is npm?

Answer: npm is a package manager and command-line interface used to install and manage JavaScript packages and run project scripts.

Q3. Why do React Native developers install Node.js?

Answer: React Native development tools use Node.js to run JavaScript-based utilities, development servers, bundlers, and project commands.

Q4. Does installing Node.js also install npm?

Answer: The official Node.js installer normally includes npm. After installation, verify both using node -v and npm -v.

Q5. How do you check the Node.js version?

Answer: Run node -v in a terminal.

Q6. How do you check the npm version?

Answer: Run npm -v in a terminal.

Q7. What is package.json?

Answer: It is a project configuration file that contains metadata, scripts, and dependency declarations.

Q8. What is package-lock.json?

Answer: It records the resolved dependency tree and package versions to support consistent npm installations.

Q9. What is the difference between npm install and npm ci?

Answer: npm install installs dependencies and may update the lockfile. npm ci performs a clean installation from an existing lockfile and requires that the lockfile and package.json be consistent.

Q10. What is npx?

Answer: npx executes package-provided command-line tools and is often used to run project generators.

Q11. What is Node.js LTS?

Answer: LTS stands for Long-Term Support. LTS releases are generally recommended for stable development environments when supported by the project's dependencies.

Q12. What should you do if the terminal does not recognize node?

Answer: Check whether Node.js is installed, open a new terminal, inspect PATH, and verify the executable location.

Q13. What is a Node.js version manager?

Answer: It is a tool that installs and switches between different Node.js versions, helping developers manage projects with different version requirements.

Q14. Can React Native be developed on Windows?

Answer: Yes. Windows supports many React Native development workflows, particularly for Android. Building iOS applications locally with Xcode requires a Mac.

Q15. Why should package compatibility be checked before installation?

Answer: Packages may require particular React Native, React, Node.js, or native toolchain versions. Checking compatibility helps avoid dependency conflicts and build failures.

30. Quick Revision Checklist

• Understand the purpose of Node.js.
• Understand npm and package management.
• Choose a Node.js version compatible with your React Native workflow.
• Install Node.js using a trusted method.
• Verify the installation with node -v and npm -v.
• Understand PATH and executable locations.
• Know how to initialize a project with npm init.
• Understand package.json and package-lock.json.
• Know when to use npm install and npm ci.
• Understand how npx runs package tools.
• Learn how to diagnose command-not-found and dependency errors.
• Review security and compatibility before installing packages.
• Follow the official React Native or Expo setup instructions.

31. Conclusion

Installing Node.js and npm is an important first step in preparing a development environment for React Native. Node.js provides the runtime required by many JavaScript development tools, while npm manages packages, project dependencies, and reusable development utilities.

After installation, developers should verify the active versions, understand their PATH configuration, and learn basic npm commands. They should also choose a supported Node.js version based on their React Native or Expo project requirements.

With Node.js and npm working correctly, learners can move on to creating a React Native project, installing compatible dependencies, running the development server, and building mobile applications for Android and iOS.

Explore the course: React Native Training at JustAcademy

Register for a demo: Register for a Course Demo

Visit JustAcademy: JustAcademy Official Website

Official Learning Resources:

• Download Node.js
• npm Installation Guide
• React Native Getting Started
• Expo Documentation